<template>
	<view class="analysis-container">
		<view class="header">
			<view class="title">血糖数据分析</view>
		</view>
		
		<!-- 日期范围过滤器 -->
		<view class="filter-card">
			<view class="filter-title">时间范围</view>
			<view class="date-filter">
				<view 
					class="filter-item" 
					v-for="(item, index) in dateFilters" 
					:key="index"
					:class="{ active: currentDateRange === item.value }"
					@tap="changeDateRange(item.value)"
				>
					{{ item.label }}
				</view>
			</view>
		</view>
		
		<!-- 统计概览 -->
		<view class="stats-card">
			<view class="card-title">统计概览</view>
			<view class="stats-content">
				<view class="stats-row">
					<view class="stats-item">
						<text class="stats-value" :class="getValueClass(statistics.average)">{{ statistics.average }}</text>
						<text class="stats-label">平均值</text>
					</view>
					<view class="stats-item">
						<text class="stats-value" :class="getValueClass(statistics.max)">{{ statistics.max }}</text>
						<text class="stats-label">最高值</text>
					</view>
					<view class="stats-item">
						<text class="stats-value" :class="getValueClass(statistics.min)">{{ statistics.min }}</text>
						<text class="stats-label">最低值</text>
					</view>
				</view>
				<view class="stats-row">
					<view class="stats-item">
						<text class="stats-value">{{ statistics.count }}</text>
						<text class="stats-label">总记录数</text>
					</view>
					<view class="stats-item">
						<text class="stats-value">{{ statistics.abnormal }}</text>
						<text class="stats-label">异常记录</text>
					</view>
					<view class="stats-item">
						<text class="stats-value">{{ abnormalRate }}%</text>
						<text class="stats-label">异常率</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 血糖趋势图表 -->
		<view class="chart-card">
			<view class="card-title">血糖趋势</view>
			
			<view class="chart-container">
				<view class="empty-chart" v-if="!chartData.length">
					<text>暂无数据，请添加血糖记录</text>
				</view>
				
				<view class="chart-canvas-container" v-else>
					<canvas canvas-id="trendChart" id="trendChart" class="chart-canvas"></canvas>
				</view>
			</view>
			
			<view class="chart-legend">
				<view class="legend-item">
					<view class="legend-color normal"></view>
					<text class="legend-text">正常（3.9至6.1）</text>
				</view>
				<view class="legend-item">
					<view class="legend-color high"></view>
					<text class="legend-text">偏高（大于6.1）</text>
				</view>
				<view class="legend-item">
					<view class="legend-color low"></view>
					<text class="legend-text">偏低（小于3.9）</text>
				</view>
			</view>
		</view>
		
		<!-- 按时间段分析 -->
		<view class="time-analysis-card">
			<view class="card-title">时段分析</view>
			
			<view class="time-analysis-content">
				<view class="empty-tip" v-if="!periodData.length">
					暂无足够数据进行分析
				</view>
				
				<view class="period-list" v-else>
					<view class="period-item" v-for="(item, index) in periodData" :key="index">
						<view class="period-info">
							<text class="period-name">{{ item.type }}</text>
							<text class="period-value" :class="getValueClass(item.average)">{{ item.average }}</text>
						</view>
						<view class="period-bar-container">
							<view 
								class="period-bar" 
								:class="getBarClass(item.average)"
								:style="{ width: getBarWidth(item.average) }"
							></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 血糖异常分析 -->
		<view class="abnormal-card">
			<view class="card-title">异常分析</view>
			
			<view class="abnormal-content">
				<view class="empty-tip" v-if="!abnormalData.length">
					暂无异常数据分析
				</view>
				
				<view class="abnormal-chart" v-else>
					<view class="pie-container">
						<canvas canvas-id="abnormalPie" id="abnormalPie" class="pie-canvas"></canvas>
					</view>
					
					<view class="abnormal-legend">
						<view class="legend-item" v-for="(item, index) in abnormalData" :key="index">
							<view class="legend-color" :style="{ backgroundColor: getAbnormalColor(item.type) }"></view>
							<view class="legend-text">
								<text class="legend-label">{{ item.label }}</text>
								<text class="legend-count">{{ item.count }}次 ({{ item.percentage }}%)</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="abnormal-analysis" v-if="abnormalTips.length > 0">
					<view class="analysis-title">改善建议</view>
					<view class="analysis-tip" v-for="(tip, index) in abnormalTips" :key="index">
						{{ index + 1 }}. {{ tip }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 数据质量分析 -->
		<view class="quality-card">
			<view class="card-title">数据质量分析</view>
			
			<view class="quality-content">
				<view class="quality-item">
					<view class="quality-label">测量频率</view>
					<view class="quality-value">{{ qualityStats.frequency }}</view>
					<view class="quality-desc">{{ getFrequencyDesc() }}</view>
				</view>
				
				<view class="quality-item">
					<view class="quality-label">数据完整性</view>
					<view class="quality-value">{{ qualityStats.completeness }}%</view>
					<view class="quality-desc">{{ getCompletenessDesc() }}</view>
				</view>
				
				<view class="quality-item">
					<view class="quality-label">测量时间段覆盖</view>
					<view class="quality-value">{{ qualityStats.timeRangeCoverage }}%</view>
					<view class="quality-desc">{{ getCoverageDesc() }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, reactive, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getBloodSugarStatistics } from '@/common/api/record.js'
	
	// 日期筛选选项
	const dateFilters = [
		{ label: '日', value: 'day' },
		{ label: '周', value: 'week' },
		{ label: '月', value: 'month' },
		{ label: '年', value: 'year' }
	]
	
	// 当前日期范围
	const currentDateRange = ref('week')
	
	// 统计数据
	const statistics = reactive({
		average: '0.0',
		max: '0.0',
		min: '0.0',
		count: 0,
		abnormal: 0
	})
	
	// 图表数据
	const chartData = ref([])
	
	// 时段分析数据
	const periodData = ref([])
	
	// 异常分析数据
	const abnormalData = ref([])
	
	// 数据质量统计
	const qualityStats = reactive({
		frequency: '0次/天',
		completeness: 0,
		timeRangeCoverage: 0
	})
	
	// 计算异常率
	const abnormalRate = computed(() => {
		if (statistics.count === 0) return '0.0'
		return ((statistics.abnormal / statistics.count) * 100).toFixed(1)
	})
	
	// 异常分析建议
	const abnormalTips = computed(() => {
		const tips = []
		
		// 根据异常情况生成建议
		if (statistics.abnormal > 0) {
			const highCount = abnormalData.value.find(item => item.type === 'high')?.count || 0
			const lowCount = abnormalData.value.find(item => item.type === 'low')?.count || 0
			
			if (highCount > lowCount) {
				tips.push('您的血糖偏高情况较多，建议控制碳水摄入，增加运动量')
				tips.push('饮食上建议增加高纤维食物，减少精制碳水和糖分摄入')
				tips.push('可以尝试进行餐后30分钟的适度有氧运动，有助于控制餐后血糖')
			} else if (lowCount > highCount) {
				tips.push('您的血糖偏低情况较多，建议规律进食，避免长时间空腹')
				tips.push('可适当增加复合碳水化合物的摄入，保持血糖稳定')
				tips.push('服药或注射胰岛素的患者，请咨询医生是否需要调整剂量')
			} else {
				tips.push('您的血糖波动较大，建议规律作息，定时定量进食')
				tips.push('建议增加血糖监测频率，密切观察血糖变化趋势')
			}
			
			tips.push('建议咨询专业医生，获取个性化的血糖管理方案')
		}
		
		return tips
	})
	
	// 切换日期范围
	const changeDateRange = (range) => {
		currentDateRange.value = range
		loadStatistics()
	}
	
	// 加载统计数据
	const loadStatistics = async () => {
		uni.showLoading({
			title: '加载中...'
		})
		
		try {
			const res = await getBloodSugarStatistics(currentDateRange.value)
			if (res.code === 0) {
				const data = res.data
				
				// 更新基本统计
				statistics.average = data.average.toFixed(1)
				statistics.max = data.max.toFixed(1)
				statistics.min = data.min.toFixed(1)
				statistics.count = data.count
				statistics.abnormal = data.abnormal || 0
				
				// 更新图表数据
				if (data.trend) {
					chartData.value = data.trend
					setTimeout(() => {
						drawTrendChart()
					}, 300)
				} else {
					chartData.value = []
				}
				
				// 更新时段统计
				if (data.typeDistribution) {
					periodData.value = data.typeDistribution.map(item => ({
						type: getTimeTypeText(item.type),
						average: item.average.toFixed(1),
						count: item.count
					}))
				} else {
					periodData.value = []
				}
				
				// 更新异常统计
				if (data.abnormalDistribution) {
					abnormalData.value = data.abnormalDistribution.map(item => {
						let type = 'normal'
						if (item.type === '低血糖') type = 'low'
						if (item.type === '偏高值' || item.type === '高血糖') type = 'high'
						
						return {
							type,
							label: item.type,
							count: item.count,
							percentage: ((item.count / statistics.count) * 100).toFixed(1)
						}
					})
					
					setTimeout(() => {
						drawPieChart()
					}, 300)
				} else {
					abnormalData.value = []
				}
				
				// 更新数据质量统计
				updateQualityStats(data)
			}
		} catch (e) {
			console.error('加载统计数据失败:', e)
		} finally {
			uni.hideLoading()
		}
	}
	
	// 更新数据质量统计
	const updateQualityStats = (data) => {
		// 计算每日测量频率
		const dayCount = currentDateRange.value === 'day' ? 1 : 
						 currentDateRange.value === 'week' ? 7 : 
						 currentDateRange.value === 'month' ? 30 : 365
		
		const frequencyValue = statistics.count / dayCount
		qualityStats.frequency = frequencyValue.toFixed(1) + '次/天'
		
		// 计算数据完整性
		// 假设理想情况下每天至少测4次（早饭前后、晚饭前后）
		const idealCount = dayCount * 4
		qualityStats.completeness = Math.min(100, Math.round((statistics.count / idealCount) * 100))
		
		// 计算测量时间段覆盖率
		// 统计有多少个不同的测量时段
		const timeTypes = data.typeDistribution?.map(item => item.type) || []
		const uniqueTimeTypes = new Set(timeTypes)
		// 8个时间段: beforeBreakfast, afterBreakfast, beforeLunch, afterLunch, beforeDinner, afterDinner, beforeSleep, random
		qualityStats.timeRangeCoverage = Math.round((uniqueTimeTypes.size / 8) * 100)
	}
	
	// 绘制趋势图表
	const drawTrendChart = () => {
		if (!chartData.value || chartData.value.length === 0) return
		
		const ctx = uni.createCanvasContext('trendChart')
		
		// 图表尺寸和边距
		const width = 320
		const height = 200
		const paddingLeft = 40
		const paddingRight = 20
		const paddingTop = 20
		const paddingBottom = 40
		const chartWidth = width - paddingLeft - paddingRight
		const chartHeight = height - paddingTop - paddingBottom
		
		// 清除画布
		ctx.clearRect(0, 0, width, height)
		
		// 获取数据
		let values = []
		let labels = []
		
		// 提取数据
		chartData.value.forEach(item => {
			values.push(item.average || item.value || 0)
			labels.push(item.date || item.month || item.time || '')
		})
		
		// 计算数据最大值和最小值，用于确定Y轴范围
		const maxValue = Math.max(...values, 10)
		const minValue = Math.min(...values.filter(val => val > 0), 3)
		
		// Y轴值范围，确保包含3.9-6.1的正常范围
		const yMin = Math.max(0, Math.floor(minValue) - 1)
		const yMax = Math.ceil(maxValue) + 1
		
		// 计算比例尺
		const xScale = chartWidth / (values.length - 1 || 1)
		const yScale = chartHeight / (yMax - yMin)
		
		// 绘制正常范围区域
		const normalMin = 3.9
		const normalMax = 6.1
		
		ctx.fillStyle = 'rgba(140, 201, 161, 0.1)' // 浅绿色半透明
		ctx.fillRect(
			paddingLeft, 
			paddingTop + chartHeight - (normalMax - yMin) * yScale,
			chartWidth,
			(normalMax - normalMin) * yScale
		)
		
		// 绘制坐标轴
		ctx.beginPath()
		ctx.strokeStyle = '#ddd'
		ctx.lineWidth = 1
		
		// x轴
		ctx.moveTo(paddingLeft, paddingTop + chartHeight)
		ctx.lineTo(paddingLeft + chartWidth, paddingTop + chartHeight)
		
		// y轴
		ctx.moveTo(paddingLeft, paddingTop)
		ctx.lineTo(paddingLeft, paddingTop + chartHeight)
		ctx.stroke()
		
		// 绘制水平网格线和Y轴刻度
		ctx.beginPath()
		ctx.strokeStyle = '#eee'
		ctx.lineWidth = 1
		ctx.font = '10px Arial'
		ctx.fillStyle = '#999'
		
		const yStep = Math.ceil((yMax - yMin) / 5)
		for (let i = 0; i <= 5; i++) {
			const y = paddingTop + chartHeight - i * yStep * yScale
			const value = (yMin + i * yStep).toFixed(1)
			
			// 网格线
			ctx.moveTo(paddingLeft, y)
			ctx.lineTo(paddingLeft + chartWidth, y)
			
			// Y轴刻度文字
			ctx.fillText(value, paddingLeft - 25, y + 4)
		}
		ctx.stroke()
		
		// 绘制X轴刻度
		ctx.font = '10px Arial'
		ctx.fillStyle = '#999'
		const labelStep = Math.ceil(labels.length / 7) // 最多显示7个标签
		
		for (let i = 0; i < labels.length; i += labelStep) {
			const x = paddingLeft + i * xScale
			ctx.fillText(labels[i], x - 10, paddingTop + chartHeight + 15)
		}
		
		// 绘制数据线
		ctx.beginPath()
		ctx.strokeStyle = '#5b8def'  // 蓝色线
		ctx.lineWidth = 2
		ctx.lineJoin = 'round'
		
		for (let i = 0; i < values.length; i++) {
			// 跳过零值数据点
			if (values[i] === 0) continue
			
			const x = paddingLeft + i * xScale
			const y = paddingTop + chartHeight - (values[i] - yMin) * yScale
			
			if (i === 0 || values[i-1] === 0) {
				ctx.moveTo(x, y)
			} else {
				ctx.lineTo(x, y)
			}
		}
		ctx.stroke()
		
		// 绘制数据点
		for (let i = 0; i < values.length; i++) {
			// 跳过零值数据点
			if (values[i] === 0) continue
			
			const x = paddingLeft + i * xScale
			const y = paddingTop + chartHeight - (values[i] - yMin) * yScale
			
			// 根据血糖值设置不同颜色
			if (values[i] < normalMin) {
				ctx.fillStyle = '#5b8def'  // 低值，蓝色
			} else if (values[i] > normalMax) {
				ctx.fillStyle = '#ff6b6b'  // 高值，红色
			} else {
				ctx.fillStyle = '#8cc9a1'  // 正常值，绿色
			}
			
			// 绘制圆点
			ctx.beginPath()
			ctx.arc(x, y, 4, 0, Math.PI * 2)
			ctx.fill()
			
			// 绘制数据值
			ctx.fillText(values[i].toFixed(1), x - 10, y - 10)
		}
		
		// 执行绘制
		ctx.draw()
	}
	
	// 绘制饼图
	const drawPieChart = () => {
		if (!abnormalData.value || abnormalData.value.length === 0) return
		
		const ctx = uni.createCanvasContext('abnormalPie')
		
		// 饼图尺寸和中心点
		const centerX = 75
		const centerY = 75
		const radius = 60
		
		// 清除画布
		ctx.clearRect(0, 0, 150, 150)
		
		// 计算总数
		const total = abnormalData.value.reduce((sum, item) => sum + item.count, 0)
		
		// 起始角度
		let startAngle = 0
		
		// 绘制每个扇形
		abnormalData.value.forEach(item => {
			const portion = item.count / total
			const endAngle = startAngle + portion * Math.PI * 2
			
			ctx.beginPath()
			ctx.moveTo(centerX, centerY)
			ctx.arc(centerX, centerY, radius, startAngle, endAngle)
			ctx.closePath()
			
			// 根据类型设置不同颜色
			ctx.setFillStyle(getAbnormalColor(item.type))
			ctx.fill()
			
			startAngle = endAngle
		})
		
		// 中心白色圆形
		ctx.beginPath()
		ctx.arc(centerX, centerY, radius * 0.6, 0, Math.PI * 2)
		ctx.setFillStyle('#fff')
		ctx.fill()
		
		// 显示总记录数
		ctx.setFontSize(12)
		ctx.setFillStyle('#333')
		ctx.setTextAlign('center')
		ctx.setTextBaseline('middle')
		ctx.fillText('总记录', centerX, centerY - 10)
		ctx.setFontSize(16)
		ctx.setFontWeight('bold')
		ctx.fillText(total.toString(), centerX, centerY + 10)
		
		// 执行绘制
		ctx.draw()
	}
	
	// 获取异常类型对应的颜色
	const getAbnormalColor = (type) => {
		switch(type) {
			case 'low':
				return '#5b8def'  // 蓝色
			case 'high':
				return '#ff6b6b'  // 红色
			default:
				return '#8cc9a1'  // 绿色
		}
	}
	
	// 获取血糖值对应的CSS类名
	const getValueClass = (value) => {
		const val = parseFloat(value)
		if (isNaN(val)) return ''
		
		if (val < 3.9) return 'value-low'
		if (val > 6.1) return 'value-high'
		return 'value-normal'
	}
	
	// 获取柱状图条的类名
	const getBarClass = (value) => {
		const val = parseFloat(value)
		if (val < 3.9) return 'bar-low'
		if (val > 6.1) return 'bar-high'
		return 'bar-normal'
	}
	
	// 计算柱状图宽度
	const getBarWidth = (value) => {
		const val = parseFloat(value)
		// 设置一个基础宽度，然后根据数值比例进行缩放
		const baseWidth = 20 // 基础宽度的百分比
		const factor = val / 15 // 假设血糖最大值约为15
		
		return `${Math.min(90, baseWidth + factor * 70)}%`
	}
	
	// 获取时段类型文本
	const getTimeTypeText = (type) => {
		const typeMap = {
			'beforeBreakfast': '空腹',
			'afterBreakfast': '早餐后',
			'beforeLunch': '午餐前',
			'afterLunch': '午餐后',
			'beforeDinner': '晚餐前',
			'afterDinner': '晚餐后',
			'beforeSleep': '睡前',
			'random': '随机'
		}
		return typeMap[type] || type
	}
	
	// 获取测量频率描述
	const getFrequencyDesc = () => {
		const freq = parseFloat(qualityStats.frequency)
		if (freq < 1) return '建议增加测量频率，至少每天1次'
		if (freq < 3) return '测量频率一般，建议增加至每天3-4次'
		if (freq < 4) return '测量频率良好，可以保持'
		return '测量频率优秀，有助于全面监控血糖'
	}
	
	// 获取数据完整性描述
	const getCompletenessDesc = () => {
		const completeness = qualityStats.completeness
		if (completeness < 30) return '数据完整性较低，建议增加记录频率'
		if (completeness < 60) return '数据完整性一般，可以提高记录的规律性'
		if (completeness < 90) return '数据完整性良好，接近理想状态'
		return '数据完整性优秀，保持良好的记录习惯'
	}
	
	// 获取时间段覆盖描述
	const getCoverageDesc = () => {
		const coverage = qualityStats.timeRangeCoverage
		if (coverage < 30) return '测量时段覆盖较少，建议增加不同时段的测量'
		if (coverage < 60) return '测量时段覆盖一般，尝试在更多时段测量'
		if (coverage < 90) return '测量时段覆盖良好，接近全面监测'
		return '测量时段覆盖全面，能够全方位监测血糖变化'
	}
	
	// 页面加载完成
	onMounted(() => {
		loadStatistics()
	})
	
	// 每次页面显示时刷新数据
	onShow(() => {
		loadStatistics()
	})
</script>

<style lang="scss">
	.analysis-container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		
		.header {
			margin-bottom: 20rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.filter-card, .stats-card, .chart-card, .time-analysis-card, .abnormal-card, .quality-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		
		.card-title, .filter-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 15rpx;
		}
		
		.filter-card {
			.date-filter {
				display: flex;
				background-color: #f5f5f5;
				border-radius: 30rpx;
				overflow: hidden;
				
				.filter-item {
					flex: 1;
					text-align: center;
					padding: 12rpx 0;
					font-size: 28rpx;
					color: #666;
					
					&.active {
						background-color: #8cc9a1;
						color: #fff;
					}
				}
			}
		}
		
		.stats-card {
			.stats-content {
				.stats-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.stats-item {
						flex: 1;
						text-align: center;
						
						.stats-value {
							display: block;
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 8rpx;
							
							&.value-high {
								color: #ff6b6b;
							}
							
							&.value-normal {
								color: #8cc9a1;
							}
							
							&.value-low {
								color: #5b8def;
							}
						}
						
						.stats-label {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
		
		.chart-card {
			.chart-container {
				height: 400rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.chart-canvas {
					width: 100%;
					height: 100%;
				}
				
				.empty-chart {
					color: #999;
					font-size: 28rpx;
				}
			}
			
			.chart-legend {
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				
				.legend-item {
					display: flex;
					align-items: center;
					margin: 0 20rpx;
					
					.legend-color {
						width: 20rpx;
						height: 20rpx;
						border-radius: 10rpx;
						margin-right: 8rpx;
						
						&.normal {
							background-color: #8cc9a1;
						}
						
						&.high {
							background-color: #ff6b6b;
						}
						
						&.low {
							background-color: #5b8def;
						}
					}
					
					.legend-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
		
		.time-analysis-card {
			.time-analysis-content {
				.empty-tip {
					text-align: center;
					padding: 40rpx 0;
					color: #999;
					font-size: 28rpx;
				}
				
				.period-list {
					.period-item {
						margin-bottom: 20rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.period-info {
							display: flex;
							justify-content: space-between;
							margin-bottom: 8rpx;
							
							.period-name {
								font-size: 28rpx;
								color: #333;
							}
							
							.period-value {
								font-size: 28rpx;
								font-weight: bold;
								
								&.value-high {
									color: #ff6b6b;
								}
								
								&.value-normal {
									color: #8cc9a1;
								}
								
								&.value-low {
									color: #5b8def;
								}
							}
						}
						
						.period-bar-container {
							height: 30rpx;
							background-color: #f5f5f5;
							border-radius: 15rpx;
							overflow: hidden;
							
							.period-bar {
								height: 100%;
								border-radius: 15rpx;
								
								&.bar-high {
									background-color: #ff6b6b;
								}
								
								&.bar-normal {
									background-color: #8cc9a1;
								}
								
								&.bar-low {
									background-color: #5b8def;
								}
							}
						}
					}
				}
			}
		}
		
		.abnormal-card {
			.abnormal-content {
				.empty-tip {
					text-align: center;
					padding: 40rpx 0;
					color: #999;
					font-size: 28rpx;
				}
				
				.abnormal-chart {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.pie-container {
						width: 150px;
						height: 150px;
						margin-bottom: 20rpx;
					}
					
					.abnormal-legend {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						
						.legend-item {
							display: flex;
							align-items: center;
							margin: 0 15rpx 15rpx;
							
							.legend-color {
								width: 20rpx;
								height: 20rpx;
								border-radius: 10rpx;
								margin-right: 8rpx;
							}
							
							.legend-text {
								display: flex;
								flex-direction: column;
								
								.legend-label {
									font-size: 24rpx;
									color: #333;
								}
								
								.legend-count {
									font-size: 22rpx;
									color: #999;
								}
							}
						}
					}
				}
				
				.abnormal-analysis {
					margin-top: 20rpx;
					background-color: #f8f8f8;
					padding: 20rpx;
					border-radius: 10rpx;
					
					.analysis-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 15rpx;
					}
					
					.analysis-tip {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
						margin-bottom: 10rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
		
		.quality-card {
			.quality-content {
				.quality-item {
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.quality-label {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.quality-value {
						font-size: 36rpx;
						font-weight: bold;
						color: #8cc9a1;
						margin-bottom: 8rpx;
					}
					
					.quality-desc {
						font-size: 24rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
		}
	}
</style> 